/** 入口样式：src/index.css  **/

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------- ① 在 base‑layer 里声明变量，theme() 会被 Tailwind 解析 ---------- */
@layer base {
  :root {
    --c-primary: theme('colors.primary'); /* #FF7F41 */
    --c-accent: theme('colors.accent'); /* #FBD04F */
    --c-surface: theme('colors.surface'); /* #FDF2D6 */
    --c-base: theme('colors.base'); /* #FCFAF1 */
    --c-text: theme('colors.text'); /* #797979 */
  }
}

/* ---------- ② 全局基础 ---------- */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--c-base); /* 用变量控制底色 */
  @apply transition-colors duration-300;
  user-select: none;
}
html.dark body {
  @apply bg-gray-900;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

html,
body,
:global(#root) {
  height: 100%;
}

/* ---------- ③ 统一阴影或去阴影（示例保留卡片阴影，其他不要） ---------- */
.my-card {
  box-shadow: 0 60px 48px rgba(255 127 65 / 0.05), 0 24px 20px rgba(255 127 65 / 0.04), 0 12px 10px rgba(255 127 65 / 0.03);
}

/* 如果要完全去阴影：把上面 box-shadow 全删或写成 none */

/* ---------- ④ 滚动条配色 ---------- */
.customized-scrollbar::-webkit-scrollbar {
  width: 6px;
  background: inherit;
}
.customized-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255 127 65 / 0.25);
}
.customized-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* -----------------------------------------------------------------------------
   ⑤ 组件层：把 primary‑**** 统统换掉，直接写变量或 Tailwind 自定义色
----------------------------------------------------------------------------- */
@layer components {
  .icon {
    @apply h-5.5 w-5.5 focus:outline-none;
  }

  /* Word Chip */
  .word-chip {
    @apply flex h-10 w-auto cursor-pointer items-center justify-center rounded-md
           border-2 border-solid bg-white px-2 py-0.5 transition-colors
           duration-100 dark:border-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600
           md:h-12 md:px-5 md:py-1;
    border-color: var(--c-primary);
  }
  .word-chip:hover {
    background: var(--c-surface);
  }
  .word-chip > span {
    @apply font-mono text-2xl font-light md:text-3xl;
    color: var(--c-text);
  }

  .word-chip-tooltip {
    @apply pointer-events-none flex items-center justify-center whitespace-nowrap rounded-lg px-2 py-1 text-xs
           shadow-md dark:bg-gray-800 dark:text-gray-300;
    background: #fff;
    color: var(--c-text);
  }

  /* 主按钮 */
  .my-btn-primary {
    @apply flex items-center justify-center rounded-lg px-6 py-1 text-lg text-white hover:opacity-90 focus:outline-none;
    background: var(--c-primary);
  }

  /* 面板按钮 */
  .my-btn-info-panel {
    @apply mt-3 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm
           transition-colors focus:outline-none sm:ml-3 sm:mt-0 sm:w-auto;
    background: var(--c-primary);
  }

  .tooltip {
    @apply whitespace-nowrap rounded-lg px-2 py-1 text-xs dark:bg-gray-700 dark:text-gray-300;
    background: #fff;
    color: var(--c-text);
  }

  /* Switch */
  .switch-root {
    @apply relative inline-flex h-6 w-12 cursor-pointer items-center rounded-full border-3 border-transparent bg-gray-300
           transition-colors duration-200 ease-in-out focus:outline-none;
  }
  .switch-root[data-headlessui-state='checked'] {
    background: var(--c-primary);
  }

  .switch-thumb {
    @apply pointer-events-none inline-block h-4 w-4 translate-x-0 transform rounded-full bg-white transition duration-200 ease-in-out;
  }
  [data-headlessui-state='checked'] .switch-thumb {
    @apply translate-x-[25px];
  }

  /* Listbox 下拉 */
  .listbox-button {
    @apply relative w-40 cursor-pointer rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none dark:bg-gray-600;
  }
  .listbox-button span:nth-of-type(1) {
    @apply block truncate dark:text-white dark:text-opacity-60;
    color: var(--c-text);
  }
  .listbox-button span:nth-of-type(2) {
    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2;
  }

  .listbox-options {
    @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg focus:outline-none dark:bg-gray-600;
  }
  .listbox-options > li {
    @apply relative cursor-pointer select-none py-2 pl-10 pr-4 dark:text-white dark:text-opacity-60 dark:ui-active:bg-gray-500;
    color: var(--c-text);
  }
  .listbox-options > li.ui-active {
    background: var(--c-surface);
    color: var(--c-primary);
  }
  .listbox-options > li.ui-selected {
    @apply font-medium;
  }
  .listbox-options-icon {
    color: var(--c-primary);
  }
  .listbox-options-icon.dark {
    color: var(--c-accent);
  }

  /* Slider */
  .slider {
    @apply relative flex h-10 w-full cursor-pointer items-center;
  }
  .slider [data-disabled] {
    @apply pointer-events-none opacity-50;
  }
  .slider > span:nth-child(1) {
    @apply relative h-[5px] flex-grow rounded-full bg-gray-200;
  }
  .slider > span:nth-child(1) > span:nth-child(1) {
    background: var(--c-primary);
  }
  .slider > span:nth-child(2) {
    @apply block h-4 w-4 cursor-pointer rounded-full border border-gray-200 bg-white;
  }
}

/* ---------- ⑥ 动画保持不变 ---------- */
.gradient-text {
  background-image: linear-gradient(90deg, #f66, #f90);
  background-clip: text;
  color: transparent;
  animation: gradient-text-hue 5s linear infinite;
}
@keyframes gradient-text-hue {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(-1turn);
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 30em;
  }
}
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #f0f0f0;
  }
}
.typewriter {
  width: 30em;
  margin: 0 auto;
}
@keyframes hideCaret {
  to {
    border-right-color: transparent;
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
